<template>
  <div :class="IsShow ? 'menusBox' : 'hide menusBox'" >
    <div class="menus">
      <div class="menusItem" v-for="(item,index) in menus" :key="index">
        <div class="menusItemBox" @click="showLayerList(item.type)" >
          {{ item.name }}
        </div>
      </div>
    </div>
    <img src="/images/row.png" :class="IsShow ? 'rowReverse row' : 'row'" alt="" @click="IsShow = !IsShow">
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { store } from "@/store/config.js"
import emitter from "@/mitt/index.js";
import { LayerEvent } from "@/mitt/LayerEventType";

let IsShow = ref(true);
let menus = ref([
  {
    name:"设备台账",
    type:"stand",
  },
  {
    name: "特种设备",
    type:"special",
  },
  {
    name:"计量设备",
    type:"metering",
  },
  {
    name:"巡检记录",
    type:"patrol",
  },
  {
    name:"保养记录",
    type:"maintain",
  },
  {
    name:"报修记录",
    type:"repairs",
  },
  {
    name:"维修记录",
    type:"upkeep",
  }
])



function showLayerList(type)
  {
    store.commit("setDialogTableStatus",true);

    switch(type)
    {
      case "stand":
        store.commit("setStandStatus",true);

        store.commit("setSpecialStatus",false);
        store.commit("setMeteringStatus",false);
        store.commit("setPatrolStatus",false);
        store.commit("setMaintainStatus",false);
        store.commit("setRepairsStatus",false);
        store.commit("setUpkeepStatus",false);
        break;
      case "special":
        store.commit("setSpecialStatus",true);

        store.commit("setStandStatus",false);
        store.commit("setMeteringStatus",false);
        store.commit("setPatrolStatus",false);
        store.commit("setMaintainStatus",false);
        store.commit("setRepairsStatus",false);
        store.commit("setUpkeepStatus",false);
        break;
      case "metering":
        store.commit("setMeteringStatus",true);

        store.commit("setSpecialStatus",false);
        store.commit("setStandStatus",false);
        store.commit("setPatrolStatus",false);
        store.commit("setMaintainStatus",false);
        store.commit("setRepairsStatus",false);
        store.commit("setUpkeepStatus",false);
        break;
      case "patrol":
        store.commit("setPatrolStatus",true);

        store.commit("setMeteringStatus",false);
        store.commit("setSpecialStatus",false);
        store.commit("setStandStatus",false);
        store.commit("setMaintainStatus",false);
        store.commit("setRepairsStatus",false);
        store.commit("setUpkeepStatus",false);
        break;
      case "maintain":
      

        store.commit("setMaintainStatus",true);

        store.commit("setPatrolStatus",false);
        store.commit("setMeteringStatus",false);
        store.commit("setSpecialStatus",false);
        store.commit("setStandStatus",false);
        store.commit("setRepairsStatus",false);
        store.commit("setUpkeepStatus",false);
        break;
      case "repairs":
        store.commit("setRepairsStatus",true);

        store.commit("setMaintainStatus",false);
        store.commit("setPatrolStatus",false);
        store.commit("setMeteringStatus",false);
        store.commit("setSpecialStatus",false);
        store.commit("setStandStatus",false);
        store.commit("setUpkeepStatus",false);
        break;
      case "upkeep":
        store.commit("setUpkeepStatus",true);

        store.commit("setRepairsStatus",false);
        store.commit("setMaintainStatus",false);
        store.commit("setPatrolStatus",false);
        store.commit("setMeteringStatus",false);
        store.commit("setSpecialStatus",false);
        store.commit("setStandStatus",false);
        break;
    }
    emitter.emit(LayerEvent.ShowLayer,type);
  }

</script>

<style scoped lang="less">
   .hide{
      transform: translateX(-240px);
      -webkit-transform: translateX(-240px);
    }
  .menusBox{
      width:100%;
      height:100%;
      background-color: #0e1823bd;
      backdrop-filter: blur(110px);
      padding: 40px 0px;
      transition: all 0.5s;
      -webkit-transition: all 0.5s;
    .row{
        width: 50px;
        height: auto;
        position: absolute;
        top: 50%;
        right: -2%;
        transform: translate(50px,-50%);
        -webkit-transform: translate(50px,-50%);
    }
    .rowReverse{
      transform:  translate(50px,-50%) scaleX(-1) ;
      -webkit-transform:  translate(50px,-50%) scaleX(-1) ;
    }
   
    .menus{
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      // justify-content: space-between;
      .menusItem{
        text-align: center;
        height: 80px;
        line-height: 80px;
        border:1px solid #045999;
        background-color: #00213a7a;
        color: white;
        border-radius: 4px;
        margin: 6% 15%;
        letter-spacing: 6px;
        font-size: 26px;
        cursor: pointer;
        :hover{
          background-color: #00213a7a;
          color: #2ee6e2;
        }
      }
    }
    
  }

</style>